<template>
	<view class="card-detail">
		<view class="top">
			<!-- type3充值卡  1次卡  2时间卡  4私教 -->
			<card-pack-item :data="data" showQrcode />
			<view style="margin-top: 20rpx;font-weight: 700;font-size: 30rpx;">
				接收人
			</view>
			<view style="width: 100%;height: 50rpx;margin-top: 20rpx;">
				<view style="width: 10%;height: 50rpx;float: left;margin-top: 15rpx;">
					<image style="width: 50rpx;height: 50rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/22e99971a7b5d0134a9177ff165967f855012c3b.png"
						mode=""></image>
				</view>
				<view
					style="width: 30%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="number" placeholder="接收人手机号" v-model="haoyouphone" disabled="disabled">
				</view>
				<view style="width: 4%;height: 50rpx;float: left;line-height: 80rpx;margin-left: 1%;">
					-
				</view>
				<view
					style="width: 25%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="text" placeholder="接收人姓名" v-model="haoyouname" disabled="disabled">
				</view>
				<view
					style="width: 24%;height: 50rpx;float: right;margin-top: 18rpx;line-height: 50rpx;font-size: 26rpx;"
					@click="card_recipientlist">
					<!-- <u-icon name="arrow-right" size="16" color="#999999"></u-icon> -->
					选择我的好友
				</view>
			</view>
			<!-- <view style="width: 100%;height: 50rpx;margin-top: 20rpx;" >
				<view style="width: 10%;height: 50rpx;float: left;margin-top: 15rpx;">
					<image style="width: 50rpx;height: 50rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/22e99971a7b5d0134a9177ff165967f855012c3b.png"
						mode=""></image>
				</view>
				<view
					style="width: 30%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="number" placeholder="接收人手机号">
				</view>
				<view style="width: 4%;height: 50rpx;float: left;line-height: 80rpx;margin-left: 1%;">
					-
				</view>
				<view
					style="width: 30%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="text" placeholder="接收人姓名">
				</view>
				<view style="width: 10%;height: 50rpx;float: right;margin-top: 28rpx;" @click="card_recipientlist">
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
			</view> -->
			<!-- <view class="" style="width: 100%;height: 120rpx;">
				<view class="" style="width: 10%;height: 100rpx;float: left;margin-top: 50rpx;">
					<image style="width: 70rpx;height: 70rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/22e99971a7b5d0134a9177ff165967f855012c3b.png"
						mode=""></image>
				</view>
				<view class="" style="width: 85%;height: 100rpx;background-color: #fff;margin-top: 30rpx;float: right;">
					<view class=""
						style="width: 60%;height: 48rpx;float: left;font-size: 26rpx;line-height: 100rpx;margin-left: 20rpx;">
						袁15651039999
					</view>
					<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
						>
					</view>
				</view>
			</view> -->
			<!-- <view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				转让套餐
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;" @click="exuclick">
				<view  v-if="data.type == 3"
					style="width: 60%;height: 48rpx;float: left;font-size: 24rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					
					转让额度{{gift_times}}
				</view>
				<view  v-if="data.type == 4 || data.type == 1"
					style="width: 60%;height: 48rpx;float: left;font-size: 24rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					转让次数{{gift_times}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;" v-if="data.type == 3">
					元
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;"                                                       
					v-if="data.type == 4 || data.type == 1">
					次
				</view>
			</view> -->
			<!-- <view style="margin-top: 10rpx;font-size: 26rpx;color: #939393;">
				卡内余额{{data.else_text}}
			</view> -->
			<!-- <view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;" >
				手续费
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					10
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;" v-if="data.type == 3">
					元
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;"
					v-if="data.type == 4 || data.type == 1">
					次
				</view>
			</view> -->
			<view style="width: 100%; height: 250rpx;background: #fff; padding: 20rpx 30rpx; font-size: ;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;">
				<view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;">备注</view>
				<view class="uni-textarea">
					<textarea placeholder-style="color:#000000" v-model='remark' />
				</view>
			</view>
			<view class="" style="width: 92%;height: 100rpx;position: absolute;bottom: 10rpx;">
				<button style="background-color: #3E8AFE; color: #fff;border-radius: 50rpx 50rpx;"
					@click="$noMultipleClicks(transfer)" type="default">确认转让</button>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="label"></u-picker>
		<u-popup @touchmove.stop :show="showAmount" @close="closeAmount" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
						@click="tabClick"></u-tabs>
					<u-icon @click="closeAmount1" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-2">
					<view class="item flex-align" v-for="(item,index) in delist" :key="index" @click="jine(item)">
						<view class="item-1">
							<view class="price"> <text>{{item.gift_times}}</text> </view>
							<view class="price-1" v-if="data.type == 3">转让额度</view>
							<view class="price-1" v-if="data.type == 4 || data.type == 1">转让次数</view>
						</view>
						<view class="item-2">
							<view class="info-1" v-if="data.type == 3">转让额度:{{item.deduction}}</view>
							<view class="info-1" v-if="data.type == 4 || data.type == 1">抵扣次数:{{item.deduction}}</view>
							<view class="info-2">手续费：{{item.price}}</view>
							<view class="info-2"style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">使用说明：</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				showAmount: false,
				noClick: true,
				data: {},
				cardno: '',
				id: 0,
				haoyouid: "",
				haoyouname: "",
				haoyouphone: "",
				remark: '',
				exu: '',
				exus: '',
				resultlist: {},
				show: false,
				columns: [
					[{
						label: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				delist: [],
				itemarray: {},
				shift_id: "",
				gift_times: '',
				deduction: '',
				datalist:{},
				classNum: 0,
				card_id:''
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			this.card_id = options.card_id
			this.getMyCardDetail()
		},
		onShow() {
			if (uni.getStorageSync("id") != '') {
				this.haoyouid = uni.getStorageSync("id")
				this.haoyouname = uni.getStorageSync("name")
				this.haoyouphone = uni.getStorageSync("pyphone")
			} else{
				this.haoyouid =''
				this.haoyouname = ''
				this.haoyouphone = ''
			}
			
		},
		methods: {
			// 关闭充值卡/取消选中充值卡
			closeAmount1() {
				this.showAmount = false;
			},
			closeAmount() {
				this.showAmount = false;
			},
			jine(item) {
				console.log(item)
				let that = this
				this.showAmount = false
				this.itemarray = item
				this.shift_id = item.id
				this.gift_times = item.gift_times
				this.deduction = item.deduction
			},
			tabClick(e) {

			},

			async transferlist() {
				let params = {
					id: this.data.id,
					transfer_user: this.haoyouid, //好友id
					phone: this.haoyouphone, //好友手机号
					venue_id: this.data.venue_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					pay_method: '5',
					remark: this.remark, //备注
				}
				let res = await venues.transfer(params)
				if (res.code === 1) {
					this.delist = res.data
				}
			},
			exusclick() {
				// this.show = true
			},
			card_recipientlist() {
				uni.navigateTo({
					url: "./card_recipient?nav=" + '1'
				})
			},
			gocard(index) {
				this.selectcard = index
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					id:this.card_id
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
					console.log(this.data, 9991122)
				}
			},
			//转让
			async transfer() {
				let payWaitTime = '00:15:00'
				if (this.haoyouphone == '') { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请选择我的好友！',
						icon: 'none'
					})
					return
				}
				
				let params = {
					id: this.data.id,
					transfer_user: this.haoyouid, //好友id
					phone: this.haoyouphone, //好友手机号
					venue_id: this.data.venue_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					pay_method: '5',
					remark: this.remark, //备注
				}
				let res = await venues.transfer(params)
				if (res.code === 1) {
					this.resultlist = res.data.info
					this.datalist = res.data.info
					if (res.data.info.order_money >= '0.01') {
						var that = this
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								that.datalist.order_money +
								"&payWaitTime=" +
								payWaitTime +
								"&venue_id=" +
								that.datalist.venue_id +
								"&order_id=" +
								that.datalist.order_id +
								"&orderid=" +
								that.datalist.orderid +
								"&order_type=" +
								that.datalist.ordertype +
								"&chaoshitype=" +
								2 + "&classNum=" +
								that.classNum +
								"&train_price=" +
								that.datalist.order_money +
											"&goods_id=" +
											that.datalist.card_id,
						});
					} else {
						this.moniPay()
					}
				} else {
					uni.showToast({
						title: res.info,
						icon: 'none'
					})
				}
			},
			// order_type 21挂失   22补卡  23  延期
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					app_id: that.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: that.data.id,
					venue_id: that.data.venue_id,
					price: '0', //价格
					pay_method: 1, //支付方式
					order_money: '0', //应付
					remark: that.remark, //备注
					add_time: nowdate,
					out_trade_no: that.resultlist.order_id,
					transaction_id: 'ZF001',
					goods_id: '1',
					order_type: that.resultlist.ordertype
				};
				// uni.request({
				// 	url: 'http://192.168.1.164/sass-test/public/index.php/api/court/moniPay',
				// 	method: 'POST',
				// 	data: {
				// 		app_id: that.$https.weixinAppId,
				// 		project_id: getApp().globalData.projectId,
				// 		id: that.data.id,
				// 		venue_id: that.data.venue_id,
				// 		price: '0', //价格
				// 		pay_method: 1, //支付方式
				// 		order_money: '0', //应付
				// 		remark: that.remark, //备注
				// 		add_time: nowdate,
				// 		out_trade_no: that.resultlist.order_id,
				// 		transaction_id: 'ZF001',
				// 		goods_id: '1',
				// 		order_type:'21'
				// 	},
				// 	header: {
				// 		'content-type': 'application/json', //自定义请求头信息
				// 	},
				// 	success: res => {

				// 	}
				// });
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/personal/personal?backUp=1'
					})

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #eeeeee;
		height: 100vh;

		.top {
			padding: 30rpx;

			.uni-textarea {
				width: 100%;
				background: #FFF;
			}

			.uni-textarea textarea {
				width: 100%;
				padding: 10rpx 0 0 0;
				line-height: 1.6;
				font-size: 28rpx;
				height: 150rpx;
			}
		}

		.store-popup {
			padding: 20rpx 0;

			// .list {
			.scroll-view_H {}

			.item {
				margin-top: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			// }
			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #2f75fa;
				}
			}


			.list-2 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 160rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: rgba(47, 117, 250, 0.2);
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #2f75fa;

							text {
								font-size: 50rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: rgba(47, 117, 250, 0.6);
							margin-top: 10rpx;
						}
					}



					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.info-2 {
							font-size: 24rpx;
							margin-bottom: 8rpx;
							color: #bebebe;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}
		}
	}
</style>